<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="//at.alicdn.com/t/font_1880456_bo4iko3ec4b.css">
<link rel="stylesheet" href="${request.contextPath}/static/css/gd-ui.css">
<#include "./login/index.ftl">
<header>
    <#if isMobile == false>
		<div class="wrapper">
			<a href="/" style="display: flex; align-items: center;font-size: 18px;color: #000;">
				<img src="/static/img/logo32.png"  alt="gugeeData" sizes="(min-width: 1200px) 32px, 24px">
				<strong style="margin-left: 16px;">Gugee Data</strong>
			</a>
			<#if tab lt 15>
				<div class="gd-search">
					<div class="gd-search__wrap">
						<i class="iconfont iconsousuo1"></i>
						<input type="text" id="headerSearchInput" placeholder="Please enter influencer name">
					</div>
					<div class="search-wrap" id="headerSearchResultWrap">
						<ul class="search-tab">
							<li class="is-active" onclick="changeHeaderSearchPlat(this, 0)">Instagram</li>
							<li onclick="changeHeaderSearchPlat(this, 1)">TikTok</li>
						</ul>
						<div class="result-list" id="headerSearchResultList">
						</div>
					</div>
				</div>
				<#--<div class="search-wrap">
					<div class="input-wrap">
						<input autofocus type="text" placeholder="Please enter TikToker's name or username"
						       onblur="hideSearch()" onfocus="showSearch()"
						       oninput="searchBlogger(this.value)" class="header-input"
						       maxlength="50" />
						<i class="iconfont iconsousuo1"></i>
					</div>
					<div class="search-result" id="searchResult">
					</div>
				</div>-->
			</#if>
			<ul class="header-tab">
				<li class="<#if tab==1>is-active</#if>">
					<a href="${contextPath}">Home</a>
				</li>
				<li class="more-tab" onmouseover="showPop(this)" onmouseout="hidePop(this)">
					<div>Instagram</div>
					<i class="iconfont icondown1"></i>
					<div class="pop-tabs">
						<dl>
							<dt>ELEMENTS</dt>
							<dd <#if tab == 25>class="is-active"</#if>>
								<a href="/instagram/hot-instagram-posts">Hot Posts</a>
							</dd>
						</dl>
						<dl>
							<dt>INFLUENCER</dt>
							<dd <#if tab == 15>class="is-active"</#if>>
								<a href="/instagram/search">Influencer Search</a>
							</dd>
							<dd <#if tab == 26>class="is-active"</#if>>
								<a href="/instagram/ad-partner-search">Ad Partner Search</a>
							</dd>
							<dd <#if tab == 21>class="is-active"</#if>>
								<a href="/instagram/rank-influencers">Comprehensive Leaderboard</a>
							</dd>
							<dd <#if tab == 22>class="is-active"</#if>>
								<a href="/instagram/follower-growth">Follower Growth Leaderboard</a>
							</dd>
							<dd <#if tab == 24>class="is-active"</#if>>
								<a href="/instagram/rank-commercial-partner">Commercial Partner Leaderboard</a>
							</dd>
						</dl>
						<dl>
							<dt>E-SHOP</dt>
							<dd <#if tab == 27>class="is-active"</#if>>
								<a href="/instagram/product-search">Popular Products</a>
							</dd>
							<dd <#if tab == 28>class="is-active"</#if>>
								<a href="/instagram/product-ranking">Products Ranking</a>
							</dd>
						</dl>
					</div>
				</li>
				<li class="more-tab" onmouseover="showPop(this)" onmouseout="hidePop(this)">
					<div>TikTok</div>
					<i class="iconfont icondown1"></i>
					<div class="pop-tabs">
						<ul>
							<li class="<#if tab==3>is-active</#if>">
								<a href="/influencer/gdindex">Influencer Search</a>
							</li>
							<li class="<#if tab==12>is-active</#if>">
								<a href="/ranking/follower">Follower Growth Leaderboards</a>
							</li>
						</ul>
					</div>
				</li>
				<li class="<#if tab==2>is-active</#if>">
					<a href="/help-art/67/about-us">Help Center</a>
				</li>
				<li class="<#if tab==10>is-active</#if>">
					<a href="/pricing">Pricing</a>
				</li>
			</ul>
            <#if login == false>
	            <a href="javascript:;" onclick="toLogin()"
	               style="text-decoration: none;margin-left: auto;">
		            <button class="small">Register/Login</button>
	            </a>
            <#else>
				<div class="account-info" onmouseover="showAccountInfo()" onmouseout="hideAccountInfo()">
					<div class="account-avatar">
						<i class="iconfont iconUser"></i>
					</div>
					<div class="wrap">
						<div class="account-top">
							<div class="title">${(user.email)!''}</div>
							<div class="tag">
                                <#if user.roleId == 1>
									<span class="gray">BASIC</span>
                                <#elseif user.roleId == 2>
									<span class="blue">PLUS</span>
                                <#elseif user.roleId == 3>
									<span class="yellow">ADVANCED</span>
                                <#else >
									<span class="red">PRO</span>
                                </#if>
							</div>
						</div>
						<div class="account-detail">
							<div class="detail-item">
								<div class="label">Credits Balance:</div>
								<div class="data"> ${user.creditsBalance}</div>
							</div>
                            <#if user.roleId gt 1>
								<#--<div class="detail-item">
									<div class="label">Reports Remaining:</div>
									<div class="data"> ${user.dailyReports}</div>
								</div>-->
								<div class="detail-item">
									<div class="label">Membership Expires:</div>
                                    <#setting datetime_format="MM/dd/yyyy"/>
									<div class="data"> ${user.expiredDate?number_to_datetime}</div>
								</div>
                            </#if>
						</div>
						<div class="account-footer" onclick="loginOut()">
							Log Out
						</div>
					</div>
				</div>
            </#if>
		</div>
    <#else>
	    <#if tab != 6 && tab != 7 && tab != 8>
		    <section class="wrap">
			    <div class="logo">
				    <img src="${request.contextPath}/static/img/logo.png" alt="TikTok analysis">
			    </div>
			    <div class="title">
                    <#if tab == 3 || tab == 5 || (tab gte 11 && tab lt 15)>
					    <h1>TikTok Influencer</h1>
                    <#elseif tab gte 15>
	                    <h1>Instagram Influencer</h1>
                    <#elseif tab == 4>
					    <h1>TikTok Video</h1>
                    <#elseif tab == 10>
					    <h1>Pricing</h1>
                    </#if>
			    </div>
			    <div class="action">
				    <i class="iconfont iconsousuo" id="headerSearchIcon"></i>
				    <i class="iconfont iconmenu-burger2" id="accountIcon"></i>
			    </div>
		    </section>
		    <div class="search-page gd-search" id="headerSearchPage">
			    <div class="search-header">
				    <div class="left">
					    <input type="text" maxlength="50" placeholder="Please enter influencer name">
					    <i class="iconfont iconsousuo"></i>
				    </div>
				    <div class="right" id="headerSearchCancel">Cancel</div>
			    </div>
			    <div class="search-wrap" id="searchMobileResult">
				    <ul class="search-tab">
					    <li class="is-active" onclick="changeHeaderSearchPlat(this, 0)">Instagram</li>
					    <li onclick="changeHeaderSearchPlat(this, 1)">TikTok</li>
				    </ul>
				    <div class="result-list">
				    </div>
			    </div>
		    </div>
		    <section class="sidebar" id="accountPage">
			    <div class="sidebar-header">
				    <div class="logo">
					    <img src="${request.contextPath}/static/img/logo.png" alt="TikTok analysis">
				    </div>
				    <div class="center">Gugee Data</div>
				    <i class="iconfont iconbuzhichi" id="closeAccount"></i>
			    </div>
			    <div class="sidebar-wrap">
                    <#if login ==true>
					    <div class="sidebar-top">
						    <div class="account-info">
							    <div class="avatar">
								    <i class="iconfont iconUser"></i>
							    </div>
							    <div>
								    <div class="title">${user.email}</div>
								    <div class="tag">
                                        <#if user.roleId == 1>
										    <span class="gray">BASIC</span>
                                        <#elseif user.roleId == 2>
										    <span class="blue">PLUS</span>
                                        <#elseif user.roleId == 3>
										    <span class="yellow">ADVANCED</span>
                                        <#else >
										    <span class="red">PRO</span>
                                        </#if>
								    </div>
							    </div>
						    </div>
						    <div class="account-remain">
							    Credits Balance: ${user.creditsBalance}
						    </div>
                            <#if user.roleId gt 1>
                            <#--<div class="account-time">
								Reports Remaining: ${user.dailyReports}
							</div>-->
							    <div class="account-time">
                                    <#setting datetime_format="MM/dd/yyyy"/>
								    Membership Expires: ${user.expiredDate?number_to_datetime}
							    </div>
                            </#if>
					    </div>
                    </#if>
				    <div class="sidebar-body">
					    <#--<div class="sidebar-item">
						    <div class="title">Instagram</div>
						    <a href="/instagram/search">
							    <div class="sub-sidebar-item">
								    <div class="label">Influencer Search</div>
								    <i class="iconfont iconarrowright"></i>
							    </div>
						    </a>
						    <a href="/instagram/ad-partner-search">
							    <div class="sub-sidebar-item">
								    <div class="label">Ad Partner Search</div>
								    <i class="iconfont iconarrowright"></i>
							    </div>
						    </a>
						    <a href="/instagram/hot-instagram-posts">
							    <div class="sub-sidebar-item">
								    <div class="label">Hot Posts</div>
								    <i class="iconfont iconarrowright"></i>
							    </div>
						    </a>
						    <a href="/instagram/rank-influencers">
							    <div class="sub-sidebar-item">
								    <div class="label">
									    Comprehensive Leaderboard
								    </div>
								    <i class="iconfont iconarrowright"></i>
							    </div>
						    </a>
						    <a href="/instagram/follower-growth">
							    <div class="sub-sidebar-item">
								    <div class="label">Follower Growth Leaderboard</div>
								    <i class="iconfont iconarrowright"></i>
							    </div>
						    </a>
						    <a href="/instagram/rank-commercial-partner">
							    <div class="sub-sidebar-item">
								    <div class="label">Commercial Partner Leaderboard</div>
								    <i class="iconfont iconarrowright"></i>
							    </div>
						    </a>
					    </div>-->
					    <div class="sidebar-item">
						    <div class="title">
							    <div class="title_inner">Instagram Elements</div>
							    <i class="iconfont iconchevron-up-16px"></i>
						    </div>
						    <a href="/instagram/hot-instagram-posts">
							    <div class="sub-sidebar-item">
								    <div class="label">Hot Posts</div>
							    </div>
						    </a>
					    </div>
					    <div class="sidebar-item">
						    <div class="title">
							    <div class="title_inner">Instagram Influencer</div>
							    <i class="iconfont iconchevron-up-16px"></i>
						    </div>
						    <a href="/instagram/search">
							    <div class="sub-sidebar-item">
								    <div class="label">Influencer Search</div>
							    </div>
						    </a>
						    <a href="/instagram/ad-partner-search">
							    <div class="sub-sidebar-item">
								    <div class="label">Ad Partner Search</div>
							    </div>
						    </a>
						    <a href="/instagram/rank-influencers">
							    <div class="sub-sidebar-item">
								    <div class="label">Comprehensive Leaderboard</div>
							    </div>
						    </a>
						    <a href="/instagram/follower-growth">
							    <div class="sub-sidebar-item">
								    <div class="label">Follower Growth Leaderboard</div>
							    </div>
						    </a>
						    <a href="/instagram/rank-commercial-partner">
							    <div class="sub-sidebar-item">
								    <div class="label">Commercial Partner Leaderboard</div>
							    </div>
						    </a>
					    </div>
					    <div class="sidebar-item">
						    <div class="title">
							    <div class="title_inner">Instagram e-Shop</div>
							    <i class="iconfont iconchevron-up-16px"></i>
						    </div>
						    <a href="/instagram/product-search">
							    <div class="sub-sidebar-item">
								    <div class="label">Popular Products</div>
							    </div>
						    </a>
						    <a href="/instagram/product-ranking">
							    <div class="sub-sidebar-item">
								    <div class="label">Products Ranking</div>
							    </div>
						    </a>
					    </div>
					    <div class="sidebar-item">
						    <div class="title">
							    <div class="title_inner">TikTok</div>
							    <i class="iconfont iconchevron-up-16px"></i>
						    </div>
						    <a href="/influencer/gdindex">
							    <div class="sub-sidebar-item">
								    <div class="label">TikTok Influencer</div>
							    </div>
						    </a>
						    <a href="/ranking/follower">
							    <div class="sub-sidebar-item">
								    <div class="label">Follower Growth Leaderboards</div>
							    </div>
						    </a>
					    </div>
                        <#if login == true>
						    <div class="sidebar-item">
							    <div class="title">
								    My Account
								    <i class="iconfont iconchevron-up-16px"></i>
							    </div>
							    <a href="/instagram/favorite">
								    <div class="sub-sidebar-item">
									    <div class="label">My Favorites</div>
								    </div>
							    </a>
							    <a href="/order">
								    <div class="sub-sidebar-item">
									    <div class="label">Order History</div>
								    </div>
							    </a>
						    </div>
                        </#if>
					    <#--<div class="sidebar-item">
						    <div class="sub-sidebar-item">
							    <div class="label">
								    <a href="mailto: tk@gugeedata.com" style="color: inherit;font-size: inherit;">
									    Contact us
								    </a>
							    </div>
						    </div>
                            <#if login == true>
							    <div class="sub-sidebar-item" onclick="loginOut()">
								    <div class="label">Log Out</div>
							    </div>
                            </#if>
					    </div>-->
				    </div>
				    <div class="sidebar-footer">
                        <#if login == false>
						    <div class="footer-item" onclick="toLogin()">
							    Log In
						    </div>
                        <#else>
						    <div class="footer-item" onclick="loginOut()">
							    Log Out
						    </div>
                        </#if>
					    <div class="footer-item">
						    <a href="/pricing">
							    Pricing
						    </a>
					    </div>
					    <div class="footer-item">
						    <a href="mailto: tk@gugeedata.com">
							    Contact us
						    </a>
					    </div>
				    </div>
			    </div>
		    </section>
	    </#if>
    </#if>
	<script src="${request.contextPath}/static/js/base.js"></script>
	<script src="${request.contextPath}/static/js/nums.js"></script>
	<script src="${request.contextPath}/static/plugins/axios.min.js"></script>
	<script src="${request.contextPath}/static/js/request.js"></script>
	<script>
        const gugeeGobal = {
            isMobile: ${isMobile?c},
            roleId: +${(user.roleId)!'0'},
            isLogin: !!'${login?string('1', '')}'
        }
        let urlParams = ''
        window.onload = () => {
            getURLParams()
        }

        function getURLParams() {
            let url = window.location.href;
            if (url.indexOf('?') > 0) {
                urlParams = url.substring(url.indexOf('?'), url.length);
            }
        }
        function jump(url) {
            window.location.href = url + urlParams;
        }

        function toLogin() {
            let loginDom = document.querySelector('.login-section')
            <#if isMobile == true>
	            document.getElementById('accountPage').hide()
	            document.body.style.overflow = 'hidden'
	        <#else>
	            if(getScroll().top > 0) {
	                loginDom.style.top = 'calc(50% + ' + getScroll().top + 'px)'
	            } else {
	                loginDom.style.top = '50%'
	            }
                showMask({
	                event: () => {
                        hideLogin()
	                }
                })
            </#if>
            loginDom.show()
            document.querySelectorAll('.login-section .login-wrap').forEach((item, index) => {
                if(index === 0) {
                    item.show()
                    document.querySelector('.login-section .login-footer-tx').innerHTML =
                        'Not registered yet? <a href="javascript:;" onclick="toRegister()">Create a new account</a>'
                }else {
                    item.hide()
                }
            })
        }
        function hideLogin() {
            <#if isMobile == true>
                document.body.style.overflowY = 'auto'
	        <#else>
	            hideMask()
            </#if>
            document.querySelector('.login-section').hide()
        }

        // 头部搜索栏事件
        let headerSearchInput
        let headerSearchResultList
        let headerPlatType = 0

        <#if isMobile == true>
        const headerSearchIcon = document.getElementById('headerSearchIcon')
        if(headerSearchIcon) {
            headerSearchInput = document.querySelector('#headerSearchPage input')
            headerSearchResultList = document.querySelector('#searchMobileResult .result-list')
            const headerSearchPage = document.getElementById('headerSearchPage')
            const headerSearchEle = headerSearchInput.parentElement
            headerSearchIcon.addEventListener('click', e => {
                headerSearchPage.show()
            })
            document.getElementById('headerSearchCancel').addEventListener('click', e => {
                headerSearchPage.hide()
            })
            headerSearchInput.addEventListener('focus', e => {
                headerSearchEle.style.borderColor = '#1890FF'
                headerSearchEle.style.backgroundColor = '#FFF'
            })
            headerSearchInput.addEventListener('blur', e => {
                e.target.parentElement.removeAttribute('style')
                headerSearchEle.style.backgroundColor = '#F5F7FA'
            })
            headerSearchInput.addEventListener('input', debounce(e => {
                if(e.target.value) {
                    if(headerPlatType === 0) {
                        headerSearchByIns()
                    } else {
                        headerSearchByTikTok()
                    }
                }
            }, 300))
        }

        if(gugeeOS.isIPhone) {
            document.querySelector('.sidebar-item:last-child').style.marginBottom = '160px'
        }
        <#else>
        headerSearchInput = document.getElementById('headerSearchInput')
        if(headerSearchInput) {
            headerSearchResultList = document.getElementById('headerSearchResultList')
            const headerSearchResultWrap = document.getElementById('headerSearchResultWrap')
            const headerSearchEle = headerSearchInput.parentElement
            headerSearchInput.addEventListener('focus', e => {
                headerSearchEle.style.borderColor = '#1890FF'
                headerSearchEle.style.backgroundColor = '#FFF'
            })
            headerSearchInput.addEventListener('blur', e => {
                e.target.parentElement.removeAttribute('style')
                headerSearchEle.style.backgroundColor = '#F5F7FA'
            })
            headerSearchInput.addEventListener('input', debounce(e => {
                if(e.target.value) {
                    headerSearchResultWrap.show()
                    if(headerPlatType === 0) {
                        headerSearchByIns()
                    } else {
                        headerSearchByTikTok()
                    }
                }
            }, 300))
            document.addEventListener('click', e => {
                if(e.target.id !== 'headerSearchInput' &&
                    e.target.tagName !== 'LI') {
                    headerSearchResultWrap.hide()
                }
            })
        }
        </#if>

        function changeHeaderSearchPlat(e, type) {
            if(headerPlatType !== type) {
                headerPlatType = type
                e.parentElement.querySelector('.is-active').classList.remove('is-active')
                e.classList.add('is-active')
                if(headerPlatType === 0) {
                    headerSearchByIns()
                } else {
                    headerSearchByTikTok()
                }
            }
        }
        function headerSearchByIns() {
            if(!headerSearchInput.value){
                return false
            }
            headerSearchResultList.showLoading()
            const url = getEncodeUrl('/ins/blogger/search', {
                username: headerSearchInput.value
            })
            _axios.get(url).then(res => {
                if(res.Code === 200) {
                    const list = res.Data.list
                    let str = ''
                    if(list.length > 0) {
                        list.forEach(item => {
                            str += '<a href="/instagram/influencer/' + item.username + '">'
                            str += '<div class="result-item">' +
                                '<div class="avatar">' +
                                '<img class="img-avatar" src="' + item.picUrl + '" alt="' + item.fullName + '">'
                            if(item.isVerified) {
                                str += '<img class="icon" src="${request.contextPath}/static/img/ins/Authentication.png" srcset="${request.contextPath}/static/img/ins/Authentication@2x.png 2x" alt="auth">'
                            }
                            str += '</div>' +
                                '<div class="user-info">' +
                                '<div class="title">' + item.fullName + '</div>' +
                                '<div class="sub-title">' + item.username + ' • Follower ' + numFormat(item.followerCount) +
                                '</div>' +
                                '</div>' +
                                '</div>'
                            str += '</a>'
                        })
                        headerSearchResultList.innerHTML = str
                        headerSearchResultList.querySelectorAll('a').forEach(item => {
                            item.addEventListener('click', e => {
                                e.stopPropagation()
                            })
                        })
                    } else {
                        showNoDataImg(headerSearchResultList)
                    }
                }
                headerSearchResultList.hideLoading()
            })
        }
        function headerSearchByTikTok() {
            if(!headerSearchInput.value){
                return false
            }
            headerSearchResultList.showLoading()
            _axios.get('/tiktoker/search?keyword=' + headerSearchInput.value).then(res => {
                if (res.Code === 200) {
                    let list = res.Data
                    if (list.length > 0) {
                        let str = ''
                        res.Data.forEach(item => {
                            str += '<a href="/tiktoker/' + item.uniqueId + '">'
                            str += '<div class="result-item">' +
                                '<div class="avatar">' +
                                '<img class="img-avatar" src="' + item.avatar + '" alt="' + item.nickname + '">'
                            if(item.customVerify || item.enterpriseVerifyReason) {
                                str += '<img class="icon" src="${request.contextPath}/static/img/ins/Authentication.png" srcset="${request.contextPath}/static/img/ins/Authentication@2x.png 2x" alt="auth">'
                            }
                            str += '</div>' +
                                '<div class="user-info">' +
                                '<div class="title">' + item.nickname + '</div>' +
                                '<div class="sub-title">' + item.uniqueId + ' • Follower ' + item.followerCount +
                                '</div>' +
                                '</div>' +
                                '</div>'
                            str += '</a>'
                        })
                        headerSearchResultList.innerHTML = str
                    } else {
                        showNoDataImg(wrap)
                    }
                    headerSearchResultList.hideLoading()
                }
            })
        }

        function toBloggerDetail(id) {
            window.location.href = '/tiktoker/' + id
        }

        function loginOut() {
            showLoading()
            _axios.get('/v1/login/out').then((res) => {
                if (res.Code === 200) {
                    window.location.reload()
                } else {
                    hideLoading()
                }
	        })
        }

        <#if isMobile == false>
	        function showPop(e) {
	            e.querySelector('.pop-tabs').show('flex')
	        }
	        function hidePop(e) {
	            e.querySelector('.pop-tabs').hide()
	        }
	        <#if login == true>
	        function showAccountInfo() {
	            document.querySelector('.account-info .wrap').show()
	        }
	        function hideAccountInfo() {
	            document.querySelector('.account-info .wrap').hide()
	        }
            </#if>
        <#else>
	        document.addEventListener('gesturestart', function (event) {
	            event.preventDefault()
	        })
	        document.addEventListener('touchstart', function (event) {
	            if (event.touches.length > 1) {
	                event.preventDefault();
	            }
	        });
	        let lastTouchEnd = 0;
	        document.addEventListener('touchend', function (event) {
	            let now = (new Date()).getTime();
	            if (now - lastTouchEnd <= 300) {
	                event.preventDefault();
	            }
	            lastTouchEnd = now;
	        }, false);

	        document.addEventListener('touchstart', function (event) {
	            if (event.touches.length > 1) {
	                event.preventDefault();
	            }
	        });
	        let accountIcon = document.getElementById('accountIcon')
	        let accountPage = document.getElementById('accountPage')
	        if(accountIcon) {
	            accountIcon.addEventListener('touchstart', (e) => {
	                accountPage.show()
	                document.body.style.overflowY = 'hidden'
	            })
	        }
	        let closeAccount = document.getElementById('closeAccount')
	        if(closeAccount) {
	            closeAccount.addEventListener('touchstart', (e) => {
	                accountPage.hide()
                    document.body.style.overflowY = 'auto'
	            })
	        }
        </#if>
	</script>
	<script type="module">
        const items = document.querySelectorAll('.sidebar-item .title')
        items.forEach(item => {
            item.addEventListener('click', () => {
                item.parentElement.classList.toggle('is-close')
            })
        })
        if(gugeeOS.isIPhone) {
            document.querySelector('.sidebar-footer').style.paddingBottom = '139px'
        }
	</script>
</header>